<template>
  <div class="reservation-management">
    <!-- 页面标题和统计信息 -->
    <div class="page-header">
      <div class="stats-cards">
        <div class="stat-card">
          <div class="stat-icon">
            <!-- 日历图标 -->
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
              <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
            </svg>
          </div>
          <div class="stat-info">
            <h3>总预约数</h3>
            <p class="stat-number">{{ totalReservations }}</p>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon active">
            <!-- 时钟图标 -->
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
              <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
            </svg>
          </div>
          <div class="stat-info">
            <h3>非取消</h3>
            <p class="stat-number">{{ activeReservationsCount }}</p>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon cancelled">
            <!-- 取消图标 -->
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>
            </svg>
          </div>
          <div class="stat-info">
            <h3>已取消</h3>
            <p class="stat-number">{{ cancelledReservationsCount }}</p>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon pending">
            <!-- 沙漏图标 -->
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
              <path d="M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6zm10 14.5V20H8v-3.5l4-4 4 4zm-4-5l-4-4V4h8v3.5l-4 4z"/>
            </svg>
          </div>
          <div class="stat-info">
            <h3>待确认</h3>
            <p class="stat-number">{{ pendingReservationsCount }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 标签页 -->
    <div class="tabs-container">
      <div class="tabs-header">
        <button
            class="tab-button"
            :class="{ active: activeTab === 'active' }"
            @click="activeTab = 'active'"
        >
          <i class="fa fa-list-alt"></i>
          预约列表
        </button>
        <button
            class="tab-button"
            :class="{ active: activeTab === 'cancelled' }"
            @click="activeTab = 'cancelled'"
        >
          <i class="fa fa-ban"></i>
          取消预约列表
        </button>
      </div>

      <div class="tab-content">
        <!-- 预约列表 -->
        <div v-if="activeTab === 'active'" class="tab-pane active">
          <div class="table-container">
            <div class="table-header">
              <h3>预约列表</h3>
              <div class="table-actions">
                <button
                    class="btn-bulk-confirm"
                    @click="bulkConfirmReservations"
                    :disabled="pendingReservationsCount === 0"
                >
                  <i class="fa fa-check-double"></i>
                  一键确认所有待预约 ({{ pendingReservationsCount }})
                </button>
                <button class="refresh-btn" @click="loadActiveReservations">
                  <i class="fa fa-refresh"></i>
                  刷新
                </button>
              </div>
            </div>
            <table class="data-table">
              <thead>
              <tr>
                <th>预约ID</th>
                <th>用户昵称</th>
                <th>课程名称</th>
                <th>教练姓名</th>
                <th>状态</th>
                <th>预约时间</th>
                <th>更新时间</th>
                <th>备注</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="reservation in activeReservationsList" :key="reservation.r_id">
                <td>{{ reservation.r_id }}</td>
                <td>{{ reservation.user_name }}</td>
                <td>{{ reservation.c_name }}</td>
                <td>{{ reservation.coach_name }}</td>
                <td>
                    <span class="status-badge" :class="getStatusClass(reservation.r_status)">
                        {{ reservation.r_status }}
                    </span>
                </td>
                <td>{{ formatDate(reservation.r_created_at) }}</td>
                <td>{{ formatDate(reservation.r_updated_at) }}</td>
                <td>{{ reservation.r_notes || '-' }}</td>
                <td>
                  <div class="action-buttons">
                    <button
                        v-if="reservation.r_status === '预约中'"
                        class="btn-confirm"
                        @click="confirmReservation(reservation.r_id)"
                    >
                      <i class="fa fa-check"></i>
                      确认预约
                    </button>
                    <button
                        class="btn-complete"
                        @click="completeReservation(reservation.r_id)"
                        :disabled="reservation.r_status !== '已确认'"
                    >
                      <i class="fa fa-flag-checkered"></i>
                      完成
                    </button>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
            <div v-if="activeReservationsList.length === 0" class="empty-state">
              <i class="fa fa-inbox"></i>
              <p>暂无预约数据</p>
            </div>
            
            <!-- 分页组件 -->
            <div class="pagination-container">
              <div class="pagination-info">
                <span>共 {{ activeReservationsTotal }} 条记录</span>
              </div>
              <div class="pagination-controls">
                <button 
                  class="pagination-btn" 
                  @click="handleActivePageChange(activeReservationsPage - 1)"
                  :disabled="activeReservationsPage <= 1"
                >
                  <i class="fa fa-chevron-left"></i>
                </button>
                <span class="pagination-current">{{ activeReservationsPage }} / {{ activeReservationsTotalPages || 1 }}</span>
                <button 
                  class="pagination-btn" 
                  @click="handleActivePageChange(activeReservationsPage + 1)"
                  :disabled="activeReservationsPage >= activeReservationsTotalPages"
                >
                  <i class="fa fa-chevron-right"></i>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 取消预约列表 -->
        <div v-if="activeTab === 'cancelled'" class="tab-pane">
          <div class="table-container">
            <div class="table-header">
              <h3>取消预约列表</h3>
              <div class="table-actions">
                <button class="refresh-btn" @click="loadCancelledReservations">
                  <i class="fa fa-refresh"></i>
                  刷新
                </button>
              </div>
            </div>
            <table class="data-table">
              <thead>
              <tr>
                <th>预约ID</th>
                <th>用户昵称</th>
                <th>课程名称</th>
                <th>教练姓名</th>
                <th>状态</th>
                <th>预约时间</th>
                <th>取消时间</th>
                <th>取消原因</th>
                <th>备注</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="reservation in cancelledReservationsList" :key="reservation.r_id">
                <td>{{ reservation.r_id }}</td>
                <td>{{ reservation.user_name }}</td>
                <td>{{ reservation.c_name }}</td>
                <td>{{ reservation.coach_name }}</td>
                <td>
                  <span class="status-badge cancelled">
                    {{ reservation.r_status }}
                  </span>
                </td>
                <td>{{ formatDate(reservation.r_created_at) }}</td>
                <td>{{ formatDate(reservation.r_cancel_time) }}</td>
                <td>{{ reservation.r_cancel_reason || '-' }}</td>
                <td>{{ reservation.r_notes || '-' }}</td>
              </tr>
              </tbody>
            </table>
            <div v-if="cancelledReservationsList.length === 0" class="empty-state">
              <i class="fa fa-inbox"></i>
              <p>暂无取消预约数据</p>
            </div>
            
            <!-- 分页组件 -->
            <div class="pagination-container">
              <div class="pagination-info">
                <span>共 {{ cancelledReservationsTotal }} 条记录</span>
              </div>
              <div class="pagination-controls">
                <button 
                  class="pagination-btn" 
                  @click="handleCancelledPageChange(cancelledReservationsPage - 1)"
                  :disabled="cancelledReservationsPage <= 1"
                >
                  <i class="fa fa-chevron-left"></i>
                </button>
                <span class="pagination-current">{{ cancelledReservationsPage }} / {{ cancelledReservationsTotalPages || 1 }}</span>
                <button 
                  class="pagination-btn" 
                  @click="handleCancelledPageChange(cancelledReservationsPage + 1)"
                  :disabled="cancelledReservationsPage >= cancelledReservationsTotalPages"
                >
                  <i class="fa fa-chevron-right"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 自定义消息提示 -->
    <div v-if="showMessage" class="custom-message" :class="messageType">
      <i :class="messageIcon"></i>
      <span>{{ messageText }}</span>
      <button class="close-btn" @click="showMessage = false">×</button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'

export default {
  name: 'ReservationManagement',
  setup() {
    const activeTab = ref('active')
    const activeReservationsList = ref([])
    const cancelledReservationsList = ref([])
    const showMessage = ref(false)
    const messageText = ref('')
    const messageType = ref('success')
    const messageIcon = ref('')
    
    // 分页相关状态
    const activeReservationsPage = ref(1)
    const cancelledReservationsPage = ref(1)
    const pageSize = ref(6)
    const activeReservationsTotal = ref(0)
    const cancelledReservationsTotal = ref(0)
    const activeReservationsTotalPages = ref(0)
    const cancelledReservationsTotalPages = ref(0)
    // 待确认预约总数（从后端API获取）
    const pendingReservationsCount = ref(0)

    // 计算属性
    const activeReservationsCount = computed(() => activeReservationsTotal.value)
    const cancelledReservationsCount = computed(() => cancelledReservationsTotal.value)
    const totalReservations = computed(() => activeReservationsTotal.value + cancelledReservationsTotal.value)
    
    // 获取待确认预约总数
    const loadPendingReservationsCount = async () => {
      try {
        const response = await fetch('http://localhost:8081/api/reservations/pending/count')
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }
        const result = await response.json()
        pendingReservationsCount.value = result.data || 0
      } catch (error) {
        console.error('Error loading pending reservations count:', error)
      }
    }

    // 显示消息
    const showNotification = (text, type = 'success') => {
      messageText.value = text
      messageType.value = type
      messageIcon.value = type === 'success' ? 'fa fa-check-circle' : 'fa fa-exclamation-circle'
      showMessage.value = true

      // 3秒后自动隐藏
      setTimeout(() => {
        showMessage.value = false
      }, 3000)
    }

    // 确认对话框
    const confirmDialog = (message) => {
      return new Promise((resolve) => {
        if (window.confirm(message)) {
          resolve(true)
        } else {
          resolve(false)
        }
      })
    }

    // 加载预约列表（分页）
    const loadActiveReservations = async (page = activeReservationsPage.value) => {
      try {
        console.log('正在加载活跃预约列表...')
        const response = await fetch(`http://localhost:8081/api/reservations/admin/active/page?page=${page}&size=${pageSize.value}`)

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }

        const result = await response.json()
        console.log('活跃预约分页数据:', result)
        
        // 解析后端返回的数据结构 - 直接使用result中的字段
        if (result) {
          activeReservationsList.value = result.data || []
          activeReservationsTotal.value = result.total || 0
          activeReservationsTotalPages.value = result.totalPages || 0
          activeReservationsPage.value = page
        } else {
          activeReservationsList.value = []
          activeReservationsTotal.value = 0
          activeReservationsTotalPages.value = 0
        }
        
        showNotification('预约列表加载成功')
      } catch (error) {
        console.error('Error loading active reservations:', error)
        showNotification('加载预约列表失败: ' + error.message, 'error')
      }
    }

    // 加载取消预约列表（分页）
    const loadCancelledReservations = async (page = cancelledReservationsPage.value) => {
      try {
        console.log('正在加载取消预约列表...')
        const response = await fetch(`http://localhost:8081/api/reservations/admin/cancelled/page?page=${page}&size=${pageSize.value}`)

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }

        const result = await response.json()
        console.log('取消预约分页数据:', result)
        
        // 解析后端返回的数据结构 - 直接使用result中的字段
        if (result) {
          cancelledReservationsList.value = result.data || []
          cancelledReservationsTotal.value = result.total || 0
          cancelledReservationsTotalPages.value = result.totalPages || 0
          cancelledReservationsPage.value = page
        } else {
          cancelledReservationsList.value = []
          cancelledReservationsTotal.value = 0
          cancelledReservationsTotalPages.value = 0
        }
        
        showNotification('取消预约列表加载成功')
      } catch (error) {
        console.error('Error loading cancelled reservations:', error)
        showNotification('加载取消预约列表失败: ' + error.message, 'error')
      }
    }

    // 一键确认所有待预约
    const bulkConfirmReservations = async () => {
      if (pendingReservationsCount.value === 0) {
        showNotification('没有待确认的预约', 'error')
        return
      }

      const confirmed = await confirmDialog(
          `确定要一键确认所有 ${pendingReservationsCount.value} 个待预约吗？此操作将把所有"预约中"状态改为"已确认"。`
      )

      if (!confirmed) return

      try {
        // 使用新的后端API一键确认所有待预约
        const response = await fetch('http://localhost:8081/api/reservations/pending/confirm-all', {
          method: 'PUT'
        })

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }

        const result = await response.json()
        const confirmedCount = result.data || 0

        showNotification(`成功确认 ${confirmedCount} 个待预约`)

        // 重新加载数据，保持在当前页
        loadActiveReservations(activeReservationsPage.value)
        // 重新获取待确认预约总数
        loadPendingReservationsCount()

      } catch (error) {
        console.error('Error bulk confirming reservations:', error)
        showNotification('批量确认预约失败: ' + error.message, 'error')
      }
    }

    // 确认单个预约
    const confirmReservation = async (reservationId) => {
      const confirmed = await confirmDialog('确定要确认这个预约吗？')
      if (!confirmed) return

      try {
        const response = await fetch(`http://localhost:8081/api/reservations/${reservationId}/confirm`, {
          method: 'PUT'
        })

        if (response.ok) {
          showNotification('预约确认成功')
          // 重新加载当前页数据
          loadActiveReservations(activeReservationsPage.value)
          // 确认单个预约后也需要更新待确认预约总数
          loadPendingReservationsCount()
        } else {
          const errorText = await response.text()
          throw new Error(errorText || '确认预约失败')
        }
      } catch (error) {
        console.error('Error confirming reservation:', error)
        showNotification('确认预约失败: ' + error.message, 'error')
      }
    }

    // 完成预约
    const completeReservation = async (reservationId) => {
      const confirmed = await confirmDialog('确定要将这个预约标记为完成吗？')
      if (!confirmed) return

      try {
        const response = await fetch(`http://localhost:8081/api/reservations/${reservationId}/complete`, {
          method: 'PUT'
        })

        if (response.ok) {
          showNotification('预约完成标记成功')
          // 重新加载当前页数据
          loadActiveReservations(activeReservationsPage.value)
        } else {
          const errorText = await response.text()
          throw new Error(errorText || '标记完成失败')
        }
      } catch (error) {
        console.error('Error completing reservation:', error)
        showNotification('标记完成失败: ' + error.message, 'error')
      }
    }

    // 状态样式
    const getStatusClass = (status) => {
      switch (status) {
        case '预约中': return 'pending'
        case '已确认': return 'confirmed'
        case '已完成': return 'completed'
        case '已取消': return 'cancelled'
        default: return ''
      }
    }

    // 日期格式化
    const formatDate = (dateString) => {
      if (!dateString) return '-'
      try {
        const date = new Date(dateString)
        if (isNaN(date.getTime())) return '-'
        return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN', {
          hour: '2-digit',
          minute: '2-digit'
        })
      } catch (error) {
        console.error('日期格式化错误:', error)
        return '-'
      }
    }

    // 分页处理函数
    const handleActivePageChange = (page) => {
      loadActiveReservations(page)
    }
    
    const handleCancelledPageChange = (page) => {
      loadCancelledReservations(page)
    }

    // 初始化加载
    onMounted(() => {
      console.log('ReservationManagement 组件已挂载')
      loadActiveReservations()
      loadCancelledReservations()
      // 页面加载时获取待确认预约总数
      loadPendingReservationsCount()
    })

    return {
      activeTab,
      activeReservationsList,
      cancelledReservationsList,
      totalReservations,
      activeReservationsCount,
      cancelledReservationsCount,
      pendingReservationsCount,
      showMessage,
      messageText,
      messageType,
      messageIcon,
      loadActiveReservations,
      loadCancelledReservations,
      bulkConfirmReservations,
      confirmReservation,
      completeReservation,
      getStatusClass,
      formatDate,
      activeReservationsPage,
      cancelledReservationsPage,
      pageSize,
      activeReservationsTotal,
      cancelledReservationsTotal,
      activeReservationsTotalPages,
      cancelledReservationsTotalPages,
      handleActivePageChange,
      handleCancelledPageChange
    }
  }
}
</script>

<style scoped>
.reservation-management {
  padding: 0;
  position: relative;
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h2 {
  color: #f8fafc;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: rgba(102, 126, 234, 0.3);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.2);
  color: #667eea;
}

.stat-icon.active {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.stat-icon.cancelled {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.stat-icon.pending {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.stat-info h3 {
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-number {
  color: #f8fafc;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

/* 标签页样式 */
.tabs-container {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.tabs-header {
  display: flex;
  background: rgba(15, 23, 42, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-button {
  flex: 1;
  padding: 1.2rem 1.5rem;
  background: transparent;
  border: none;
  color: #cbd5e0;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.tab-button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.tab-button.active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
  color: #f6ad55;
  border-bottom: 2px solid #f6ad55;
}

.tab-content {
  padding: 0;
}

.tab-pane {
  min-height: 400px;
}

/* 表格样式增强 */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.4);
}

.table-header h3 {
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.table-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* 一键确认按钮样式 */
.btn-bulk-confirm {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
}

.btn-bulk-confirm:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.btn-bulk-confirm:disabled {
  background: rgba(156, 163, 175, 0.5);
  color: rgba(156, 163, 175, 0.8);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.refresh-btn {
  background: rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.3);
  color: #cbd5e0;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.refresh-btn:hover {
  background: rgba(102, 126, 234, 0.25);
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.3);
  transform: translateY(-1px);
  color: white;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  background: rgba(15, 23, 42, 0.4);
  color: #cbd5e0;
  font-weight: 600;
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-table td {
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  font-weight: 500;
}

.data-table tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* 状态徽章 */
.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-badge.confirmed {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge.completed {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-badge.cancelled {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 0.5rem;
}

.btn-confirm,
.btn-complete {
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.btn-confirm {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.btn-confirm:hover {
  background: rgba(34, 197, 94, 0.25);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
  transform: translateY(-1px);
}

.btn-complete {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.btn-complete:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.25);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
}

.btn-complete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 3rem;
  color: #94a3b8;
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state p {
  margin: 0;
  font-size: 1.1rem;
}

/* 分页组件样式 */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pagination-info {
  color: #94a3b8;
  font-size: 0.9rem;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pagination-btn {
  background: rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.3);
  color: #cbd5e0;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-btn:hover:not(:disabled) {
  background: rgba(102, 126, 234, 0.25);
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
  transform: translateY(-1px);
  color: white;
}

.pagination-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.pagination-current {
  color: #f8fafc;
  font-size: 0.9rem;
  font-weight: 500;
  min-width: 80px;
  text-align: center;
}

/* 响应式分页 */
@media (max-width: 768px) {
  .pagination-container {
    flex-direction: column;
    gap: 1rem;
  }
  
  .pagination-info {
    order: 2;
  }
  
  .pagination-controls {
    order: 1;
  }
}

/* 自定义消息提示 */
.custom-message {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 10000;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.custom-message.success {
  background: rgba(34, 197, 94, 0.9);
  color: white;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.custom-message.error {
  background: rgba(239, 68, 68, 0.9);
  color: white;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }

  .tabs-header {
    flex-direction: column;
  }

  .table-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .table-actions {
    flex-direction: column;
    width: 100%;
  }

  .btn-bulk-confirm {
    width: 100%;
    justify-content: center;
  }

  .data-table {
    display: block;
    overflow-x: auto;
  }

  .action-buttons {
    flex-direction: column;
  }

  .custom-message {
    left: 20px;
    right: 20px;
    max-width: none;
  }
}
</style>